<!DOCTYPE html>
<html>
<head>
    <title>{$title}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="__CSS__/style.css?v={$t}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="__CSS__/base.css?v={$t}">
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js?v=20150120"></script>
    <script src="__PUBLIC__/js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="__CSS__/buttons.css" media="all">
    <script>
        var _speedMark = new Date();
        function init_viewport()
        {
            if(/Android (\d+\.\d+)/.test(navigator.userAgent))
            {
                var version = parseFloat(RegExp.$1);
                if(version>2.3)
                {
                    var width = window.outerWidth == 0 ? window.screen.width : window.outerWidth;
                    var phoneScale = parseInt(width)/500;
                    document.write('<meta name="viewport" content="width=500, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');
                }else
                {
                    document.write('<meta name="viewport" content="width=500, target-densitydpi=device-dpi">');
                }
            }
            else if(navigator.userAgent.indexOf('iPhone') != -1)
            {
                var phoneScale = parseInt(window.screen.width)/500;
                document.write('<meta name="viewport" content="width=500; min-height=750;initial-scale=' + phoneScale +'; user-scalable=no;" /> ');
            }
            else
            {
                document.write('<meta name="viewport" content="width=500, height=750, initial-scale=0.64" /> ');

            }
        }
        init_viewport();

        document.ontouchmove = function(e)
        {
            e.preventDefault();
        }
    </script>
</head>
<body onresize="bodyresize();" style="position: relative;">
{__CONTENT__}
{empty name='openid'}
<div class="jun-menu">
    <div class="jun-menu-item" onclick="style_template_sel(1)">
        <div>选模板</div>
        <div class="jun-opacity-back"></div>
    </div>
    <div class="jun-menu-item" onclick="music_sel(2)">
        <div>选音乐</div>
        <div class="jun-opacity-back"></div>
    </div>
    <div class="jun-menu-item" onclick="edit_pic(3)">
        <div>增删图</div>
        <div class="jun-opacity-back"></div>
    </div>
    <div class="jun-menu-item" onclick="edit_title(4)">
        <div>改标题</div>
        <div class="jun-opacity-back"></div>
    </div>
</div>
<div id="jun-wind" style="display:none">
    <div id="jun-wind-title">
        <div id="head-title">选择模板</div>
        <div id="head-search">选择歌曲</div>
        <div id="jun-wind-close" onclick="reflush();">×</div>
    </div>
    <div id="jun-wind-content">
        <div id="jun-content-1">
            <div id="style-menu">
                <div id="style-type-0" onclick="style_click(0,this)" class="active">热门</div>
                {volist name='tplcate' id='vo'}
                <div id="style-type-{$vo['id']}" onclick="style_click({$vo['id']},this)">{$vo['name']}</div>
                {/volist}
            </div>
            <div id="style-box" style="padding-bottom: 60px;">
                <div id="template-0">
                    {volist name='tplhot' id='val'}
                    <div class="style-item" onclick="style_sel({$val['id']})">
                        <img src="{$val.img}">
                        <span>{$val['title']}</span>
                    </div>
                    {/volist}
                </div>
                {volist name='tplcate' id='vo'}
                <div id="template-{$vo['id']}" style="display: none;">
                    {present name='tpllists[$vo["id"]]'}
                    {volist name='tpllists[$vo["id"]]' id='val'}
                    <div class="style-item" onclick="style_sel({$val['id']})">
                        <img src="{$val.img}">
                        <span>{$val['title']}</span>
                    </div>
                    {/volist}
                    {/present}
                </div>
                {/volist}
                <div class="jun-content-bottom"></div>
            </div>
        </div>
        <div id="jun-content-2">
            <div id="music-menu">
                <div id="music-type-0" onclick="music_click(0,this)" class="active">热门</div>
                {volist name='musiccate' id='c'}
                <div id="music-type-{$c['id']}" onclick="music_click({$c['id']},this)">{$c['name']}</div>
                {/volist}
            </div>
            <div id="musicbox">
                <div id='music-0' style="padding-bottom: 180px;">
                    {volist name='musichot' id='m'}
                    <div class="musicbox-item">
                        <div class="musicbox-item-title">{$m['title']}</div>
                        <div class="musicbox-item-play" onclick="music_choose('{$m.url}',this)"></div>
                        <div class="musicbox-item-done" onclick="music_select({$m['id']},'{$m.url}')"></div>
                    </div>
                    {/volist}
                </div>
                {volist name='musiccate' id='ms'}
                <div id='music-{$ms["id"]}' style="display: none;padding-bottom: 180px;">
                    {present name='lists[$ms["id"]]'}
                    {volist name='lists[$ms["id"]]' id='m'}
                    <div class="musicbox-item">
                        <div class="musicbox-item-title">{$m['title']}</div>
                        <div class="musicbox-item-play" onclick="music_choose('{$m.url}',this)"></div>
                        <div class="musicbox-item-done" onclick="music_select({$m['id']},'{$m.url}')"></div>
                    </div>
                    {/volist}
                    {/present}
                </div>
                {/volist}
            </div>
        </div>
        <div id="jun-content-3">
            <div class="jun-addpic-btn" onclick="jun_add_pic()">新增图片</div>
            <div class="jun-addpic-tip" id="jun-addpic-tip">
                <span>返回公众号输入界面，并点击下方”添加图片“按钮，来增加图片。</span>
                <img src="__IMG__/help2.jpg">
                <span>确定增加图片吗？</span>
                <div onclick="jun_addpic_ok()">确定</div>
                <div onclick="jun_addpic_cancle()">取消</div>
            </div>
            <div id="jun-pics-content"></div>
            <div class="jun-addpic-btn" style="margin-bottom:190px" onclick="reflush()">完成</div>
        </div>
        <div id="jun-content-4">
            <div class="album-title">
                <textarea id="album-title" maxlength="30" rows="3" placeholder="标题文字(限30字)...">{$title}</textarea>
            </div>
            <div style="height: 31px;line-height: 31px;margin-top: 20px;">
                <div class="squaredTwo">
                    <input type="checkbox" value="1" id="squaredTwo" name="opening" {if condition="$open eq 1"}checked{/if}/>
                    <label for="squaredTwo"></label>
                </div>
                分享到相册广场让更多人看到您
            </div>
            <div class="title-ok" onclick="title_sure()">确定</div>
        </div>
    </div>
</div>
<script>

    function objid(id) {
        return document.getElementById(id);
    }
    var urls = new Array();
    for(var i = 0; i < slider_images_url.length; i++) urls.push(slider_images_url[i]);
    function onImgClick(index){
        wx.ready(function(){
            wx.previewImage({
                current: slider_images_url[index],
                urls:urls
            });
        });
    }
    //设置模板
    function style_sel(sid){
        var url ="{:url('Album/setTpl')}?id={$id}&uid={$uid}";
        $.ajax({
            url:url,
            type:'post',
            data:{sid:sid},
            success:function(result){
                if(result.status == 1){
                    jun_close_wind();
                    window.location.href=result.url;
                }else{
                    alert(result.msg);
                }
            }
        });
    }

    function music_select(mid,url){
        $.ajax({
            url:"{:url('Album/setMusic')}?id={$id}",
            type:'post',
            data:{mid:mid},
            success:function(result){
                if(result.status == 1){
                    tool_close();
                    jun_music_player.src = url;
                    jun_music_player.play();
                    if (objid('sound_image')) {
                        objid('sound_image').style.webkitAnimation = "zhuan 1s linear infinite";
                    }
                    jun_close_wind();
                }else{
                    alert(result.msg);
                }

            }
        });
    }
    //预览音乐
    function music_click(index,obj){
        $('#musicbox .musicbox-item').parent().hide();
        $('#music-'+index).show();
        $('#music-menu div').removeClass('active');
        $(obj).addClass('active');
    }
    //模板分类选择
    function style_click(index,obj){
        $('#style-box .style-item').parent().hide();
        $('#template-'+index).show();
        $('#style-menu div').removeClass('active');
        $(obj).addClass('active');
    }
    var reloadindex = 0;
    function reflush() {
        //修改图片顺序
        if(reloadindex != 0) return '';
        reloadindex++;
        var img_order_edit = false;
        var order = '';
        $.each($('.jun-del-pic-b'),function(k,v){
            var o = $(v).attr('data-order');
            order += o+",";
            if(o != k) img_order_edit = true;
        });
        jun_close_wind();
        if(img_order_edit){
            $.ajax({
                url:"{:url('Album/setPicOrder')}?id={$id}",
                type:'post',
                data:{order:order},
                success:function(){
                    window.location.href=location.href+'&t='+((new Date()).getTime());
                }
            });
        }else{
            window.location.href=location.href+'&t='+((new Date()).getTime());
        }
    }

    function jun_close_wind() {
        tool_close();
        objid('jun-wind').style.display = 'none';
        if (objid('music_player')) {
            objid('music_player').pause();
        }
    }
    var titles = ["选模板", "选音乐", "更换图片", "写相册的标题"];

    function jun_open_wind(index) {
        tool_open();
        var wind = objid('jun-wind');
        wind.style.display = 'block';
        for (var i = 1; i <= titles.length; i++) {
            objid('jun-content-' + i).style.display = 'none';
        }
        objid('jun-content-' + index).style.display = 'block';
        objid('head-title').innerHTML = titles[index - 1];
    }

    //
    function style_template_sel(index) {
        jun_close_wind();
        jun_open_wind(index);
    }
    //音乐
    var jun_music_page = 0;
    var jun_music_num = 20;
    var jun_music_type = 'pop';

    function tool_open() {
        document.ontouchmove = null;
    }

    function tool_close() {
        document.ontouchmove = function(e) {
            e.preventDefault();
        }
    }

    function music_sel(index) {
        jun_close_wind();
        jun_open_wind(index);
    }


    function music_choose(url,obj) {
        $('.musicbox-item-play').removeClass('on');
        $(obj).addClass('on');
        if (jun_music_player != null) {
            jun_music_player.pause();
            if (objid('sound_image')) {
                objid('sound_image').style.webkitAnimation = "";
            }
        }
        if (objid('music_player') == null) {
            var player = document.createElement('audio');
            player.id = 'music_player';
            player.src = url;
            player.loop = 'loop';
            player.play();
            document.body.appendChild(player);
        } else if (objid('music_player').src == url) {
            if (objid('music_player').paused) {
                objid('music_player').play();
            } else {
                objid('music_player').pause();
            }
        } else {
            objid('music_player').src = url;
            objid('music_player').play();
        }
    }

    //删图
    function edit_pic(index) {
        jun_close_wind();
        jun_open_wind(index);
        var obj = objid('jun-pics-content');
        var album_pic = eval('('+'{:json_encode($pics)}'+')');
        obj.innerHTML = '';
        for (var i = 0; i < album_pic.length; i++) {
            var photo_id = album_pic[i]['id'];
            var str = "<div class='jun-del-pic-b' data-order='"+photo_id+"'>";
            str += "<div id='jun-del-pic-"+photo_id+"' onclick='onImgClick("+i+")' class='jun-del-pic' style='background:url(" + album_pic[i]['url'] + ");background-size:100% 100%'></div>";
            str += '<div class="jun-del-ok" onclick="jun_del_pic(' + i + ', \'' + photo_id + '\')"><div class="jun-opacity-back"></div><div>×</div></div>';
            str += '<div class="imgadjust"><a class="imgleft">&nbsp;</a><a class="imgright">&nbsp;</a></div>';
            str += "</div>";
            $(obj).append(str);
        }
        obj.style.overflow = 'auto';
        var parent = document.getElementById("jun-content-3");
        parent.style.overflow = 'auto';

        $('.imgleft').click(function(){
            var curImg = $(this).parent().parent();
            var preImg = curImg.prev();
            //console.log(preImg);
            if(preImg){
                curImg.insertBefore(preImg);
                preImg.insertAfter(curImg);
            }
        });
        $('.imgright').click(function(){
            var curImg = $(this).parent().parent();
            var neImg = curImg.next();
           // console.log(neImg);
            if(neImg){
                neImg.insertBefore(curImg);
                curImg.insertAfter(neImg);
            }
        });
    }

    function jun_add_pic() {
        objid('jun-addpic-tip').style.display = 'block';
    }

    function jun_addpic_ok() {
        $.ajax({
            url:"{:url('Album/addpic')}?id={$id}",
            success:function(){
                wx.closeWindow();
            }
        });
    }

    function jun_addpic_cancle() {
        objid('jun-addpic-tip').style.display = 'none';
    }

    function jun_del_pic(index, photo_id) {
        var uid = {$uid};
        if (!confirm('确定要删除该照片吗？')) {
            return;
        }
        $('.jun-del-pic-b').eq(index).remove();
        var photo_urls = slider_images_url.splice(index, 1);

        var id = "{$id}";

        $.ajax({
            url:"{:url('Album/delpic')}",
            type:'get',
            data:{id:id,pid:photo_id,uid:uid}
        });
    }
    //标题
    function edit_title(index) {
        jun_close_wind();
        jun_open_wind(index);
        if (atitle == '音乐相册，打开看看')
            objid('album-title').value = '';
        else
            objid('album-title').value = atitle;
    }

    function title_sure() {
        var obj = objid('album-title');
        if (obj.value == "") {
            alert('文字不能为空噢~');
        } else {
            atitle = obj.value;
            $.ajax({
                url:"{:url('Album/setTitle')}?id={$id}",
                type:'post',
                data:{title:atitle,open:$('#squaredTwo').prop('checked')?1:0},
                success:function(data){
                    window.location.href=location.href+'&t='+((new Date()).getTime());
                }
            });
        }
    }
</script>
{else /}
<div id="jun-wind" style="display:none">
    <div id="jun-wind-title">
        <div id="head-title">关注公众号</div>
        <div id="jun-wind-close" onclick="close_win();">×</div>
    </div>
            <div style="text-align:center;padding-top:30px;font-size:1.5em;">
                长按二维码关注‘{$site.title}’微信公众号<br />
                即可制作炫酷的音乐相册哦！<br />
                <p style="padding:10px 0;">
                <img src="{$site.weixin_pic}" alt="微信二维码" width="250" height="250">
                </p>
            </div>
</div>
<a id="guanzhu_container" href="javascript:;" onclick="showqrcode();" class="large button" style="padding:0;text-align:center;line-height:45px;font-size:22px;position:absolute;bottom:40px;left:150px;width:200px;height:45px;z-index:9999;-webkit-animation:guangzhu_ani 0.8s linear infinite alternate;background-color: #91bd09;
		color: white;">自己做相册</a>
<script>
    function showqrcode(){
        $("#jun-wind").show();
    }
    function close_win(){
        $("#jun-wind").hide();
    }
</script>
{/empty}
<script type="text/javascript">
    var p = navigator.platform;
    var system = {};
    system.win = p.indexOf("Win") == 0;
    system.mac = p.indexOf("Mac") == 0;
    system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
    if(system.win||system.mac||system.xll){
        bodyresize();
    }
    function bodyresize(){
        if(system.win||system.mac||system.xll){
            {empty name="openid"}
            $('body').css('marginLeft',(document.body.clientWidth - $('#container').width())/2).css('width',$('#container').width());
            {/empty}
        }
    }
    var shareData = {
        title: "{$sharetitle}",
        link: "{:url('Album/index')}?id={$id}&uid={$uid}",
        desc: "这是我做的相册，赶快来看看吧！",
        imgUrl: "{$img}",
        success:function(){

        }
    };
    jssdkconfig = {$sdkconfig} || { jsApiList:[] };
    jssdkconfig.debug = false;
    jssdkconfig.jsApiList = ['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','showOptionMenu','chooseWXPay'];
    wx.config(jssdkconfig);
    wx.ready(function () {
        wx.onMenuShareAppMessage(shareData);
        wx.onMenuShareTimeline(shareData);
        wx.onMenuShareQQ(shareData);
        wx.onMenuShareWeibo(shareData);

    });

    var music_url = "{$music}";
    var jun_music_player = new Audio();
    $(function(){
        function play_music() {
            if (music_url == '') {
                return;
            }
            jun_music_player.src = music_url;
            jun_music_player.loop = 'loop';
            jun_music_player.play();
            if($('#sound_image').length > 0) $('#sound_image')[0].style.webkitAnimation = "zhuan 1s linear infinite";
            bplay = 1;
        }

        function create_music() {
            if (music_url == '') {
                return;
            }
            play_music();
            sound_div = document.createElement("div");
            sound_div.setAttribute("ID", "cardsound");
            sound_div.style.cssText = "position:absolute;right:20px;top:25px;z-index:50;visibility:visible;";
            sound_div.onclick = switchsound;
            bg_htm = "<img id='sound_image' src='__IMG__/music_note_big.png' style='-webkit-animation:zhuan 1s linear infinite'>";
            txt_htm = "<div id='music_txt' style='color:white;position:absolute;left:-40px;top:30px;width:60px'></div>";
            sound_div.innerHTML = bg_htm + txt_htm;
            document.getElementById('container').appendChild(sound_div);
        }
        var bplay = 0;

        function switchsound() {
            au = jun_music_player;
            ai = objid('sound_image');
            if (au.paused) {
                bplay = 1;
                au.play();
                ai.style.webkitAnimation = "zhuan 1s linear infinite";
                $('#music_txt').text("打开").show();
                setTimeout(function() {
                    $('#music_txt').hide();
                }, 2500);
            } else {
                bplay = 0;
                au.pause();
                ai.style.webkitAnimation = "";
                $('#music_txt').text("关闭").show();
                setTimeout(function() {
                    $('#music_txt').hide();
                }, 2500);
            }
        }

        create_music();
    });
</script>
</body>
</html>